<template>
  <!-- style={{width: showWidth, ...style}} -->
  <div className="jh-temperature-chart">
    <div className="jh-temperature-chart-body">
      <svg
        :width="showWidth"
        :height="showHeight"
        xmlns="http://www.w3.org/2000/svg"
      >
        <TemperatureDesign :config="config" />

        <TemperatureData v-if="data" :config="config" :data="data" />
      </svg>
    </div>
    <!-- <TemperatureFooter :config="config" /> -->
  </div>
</template>

<script setup lang="ts">
import {
  reactive,
  ref,
  onBeforeUnmount,
  onMounted,
  computed,
  watch,
  getCurrentInstance,
} from "vue";

import TemperatureDesign from "./temperatureDesign/index.vue";

import TemperatureData from "./temperatureData/index.vue";


import TemperatureFooter from "./temperatureFooter/index.vue";

let props = defineProps({
  config: Object,
  data: Array,
});

let showWidth: number = ref(0);
let showHeight: number = ref(0);

onMounted(() => {

  // debugger

  let { config, designData, showData, showSize, showRect } = props.config;

  showWidth.value = showSize.showWidth;
  showHeight.value = showSize.showHeight;

  // console.log("config", props.config, props.data, showSize);
});
</script>

<style lang="scss" scoped></style>
